<template>
  <div class="allBox">
    <div class="permissionCon">
      <div class="permissionBox" v-for="item in packageVal" :key="item.id">
        <div class="permiss">
          <p class="p1">
            {{ item.title }}
            <span @click="searchPermission(item)">查看权限</span>
          </p>
          <p class="p2">
            {{ item.internalContent }}
          </p>
        </div>
      </div>
    </div>
    <permission-tree ref="permissionTreeRef"></permission-tree>
  </div>
</template>

<script setup>
  import { watch, onMounted, reactive, ref, nextTick } from 'vue'
  import { RouterView } from 'vue-router'
  import { useRouter } from 'vue-router'
  import dt from '@dt/dt'
  import { userStore } from '@/store/user'
  import permissionTree from './permissionTree.vue'

  const props = defineProps({
    packageVal: {
      type: Array,
      default: function () {
        return []
      }
    }
  })
  const permissionTreeRef = ref()
  function searchPermission(val) {
    permissionTreeRef.value.show(val.id, val.title)
  }
  onMounted(() => {})
</script>

<style scoped lang="scss">
  .permissionCon {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap; /* 设置换行 */
    .permissionBox {
      border: 1px #eee solid;
      width: 49%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 20px;
      margin-bottom: 10px;
      .checkCon {
        width: 20px;
      }
      .permiss {
        flex: 1;
        .p1 {
          font-size: 14px;
          font-weight: bold;
          span {
            font-weight: normal;
            color: #2d61f4;
            cursor: pointer;
          }
        }
        .p2 {
          line-height: 2;
          margin-top: 10px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 设置最大行数为2 */
          overflow: hidden;
          text-overflow: ellipsis; /* 文本超出显示省略号 */
        }
      }
    }
  }
</style>
